<template>
  <div>
      <!-- <img src="@/assets/img/hb.jpg" class="lvimg"> -->

      <div style="text-align:center;">
      <!-- <span style="font-size:20px;">Loading</span> -->
      <x-img :src="imgurl" class="ximg-demo" error-class="ximg-error" :offset="-100" container="#vux_view_box_body"></x-img>
    </div>
  </div>
</template>

<script>
import { XImg } from 'vux'

export default { 
  components: {
    XImg
  },
  data() {
    return {  
      imgurl: ''
    }
  },
  methods: {
    success (src, ele) {
      // console.log('success load', src)
      const span = ele.parentNode.querySelector('span')
      ele.parentNode.removeChild(span)
    },
    error (src, ele, msg) {
      // console.log('error load', msg, src)
      const span = ele.parentNode.querySelector('span')
      span.innerText = 'load error'
    }
  }
  ,
  activated(){
    this.$emit("viewIn",2);
  }
}
</script>

<style lang="less">
.ximg-demo {
  width: 100%;
  height: auto;
}
.ximg-error {
  background-color: yellow;
}
.ximg-error:after {
  content: '加载失败';
  color: red;
}
</style>